<script setup lang="ts">
//下拉组件
import { ref } from "vue";
import { Meat, Type } from "@/base/service/interface";

//传值
const props = defineProps<{
  meat: Meat;
  open: boolean;
  data: Type[] | undefined;
}>();

//触发事件
const emit = defineEmits(["someEvent", "modifyState"]);

//选中状态
const active = ref(false);

//选中的子菜单
const childMenu = ref(-1);

//点击状态
const clickActive = () => {
  //允许点击了才能点击
  if (props.meat.active) {
    active.value = !active.value;
  }
};

//子菜单选中
const childClickActive = (id: number) => {
  active.value = !active.value; //收起子菜单

  childMenu.value = id; //显示选中的内容
  emit("modifyState", { obj: props.meat.id, child: id }); //传值给父组件 - 修改状态用
  emit("someEvent", id); //传值给父组件- 计算设备用
};

//const printData = () => {
//  console.log("收到的值");
//  console.log(props.data);
//  console.log(props.meat);
//};
</script>
<template>
  <div
    class="select"
    :class="{
      active: open && active, //控制子菜单显示
      enable: meat.active, //控制能否选择
      selected: meat.select, //选中效果
    }"
    id="select-product"
  >
    <div class="label" @click="clickActive">
      <i class="select-type">
        <span class="type" v-show="meat.select">
          {{ meat.tag }}
          <span>：</span>
        </span>
        <!--
          未选中状态
        -->
        <span>
          {{
            meat.select
              ? data?.find((obj) => obj.id === childMenu)?.title
              : meat.title
          }}
        </span>
      </i>
      <i class="select-btn"></i>
    </div>
    <div class="menu-list" id="list-product">
      <ul class="center">
        <li
          v-for="item in data"
          :key="item.id"
          @click="childClickActive(item.id)"
        >
          <i>{{ item.title }}</i>
        </li>
      </ul>
    </div>
  </div>
  <!--
<button @click="printData">打印数据</button>
  -->
</template>
<style scoped lang="less">
.select {
  position: relative;
  height: 62px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: #fefefe;
  border: 1px solid #f1f1f1;
  background: linear-gradient(0deg, #fcfcfc, #fafafa);

  i {
    font-style: normal;
    display: block;
  }
  .type {
    display: none;
  }
  .select-type {
    float: left;
    color: #ccc;
  }
  .select-btn {
    --ico: url(./src/assets/select-btn.png);
    width: 8px;
    height: 62px;
    float: right;
    background: var(--ico) 50% no-repeat;
  }
  .menu-list {
    opacity: 0;
    display: none;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 51px;
    z-index: 25;
    ul {
      width: 430px;
      max-height: 255px;
      margin: 12px 1px 0 -1px;
      overflow: auto;
      border-radius: 0 0 7px 7px;
      background: #fff;
      box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.15);
    }
    li {
      border: 1px solid #ddd;
      border-top: none;
      height: 62px;
      line-height: 62px;
      padding-left: 20px;
      cursor: pointer;
      color: #8d8d8d;
    }
    li.active,
    li:hover {
      background: #f5f5f5;
      color: #545454;
    }
  }
}
.select-moren,
.select {
  .label {
    z-index: 26;
    line-height: 62px;
    padding: 0 20px;
    cursor: not-allowed;
    overflow: hidden;
  }
}

.select.active,
.select.enable,
.select.selected {
  .label {
    cursor: pointer;
  }
}
.select.enable,
.select.selected {
  border: 1px solid #ddd;
  background: #f7f7f7;
  background: linear-gradient(0deg, #f7f7f7, #f2f2f2);
}

.select.enable .select-type {
  color: #909090;
}
.select.selected .select-type {
  color: #626262;
}

.select.enable.active {
  background: #fff;
  border-radius: 7px 7px 0 0;
  border-bottom: 1px solid #ddd;
  .select-type {
    color: #b8b8b8;
  }
}
.select.select-moren,
.select.selected {
  .type {
    display: inline;
  }
}

.select.active .menu-list {
  opacity: 1;
  display: block;
  visibility: visible;
  transition: opacity 0.2s ease;
}
</style>
